/**
 * Created by mi on 2017/8/24.
 */
@charset "utf-8";


.design-works{
    .works-list{
        li{
            height: 300px;
            &:hover{
                box-shadow: none;
            }
            .info-title{
                color: #000;
            }
            .img-loding:after{
                display: inline-block;
                position: absolute;
                width: 82px;
                height: 82px;
                top: 50%;
                left: 50%;
                margin-top: -41px;
                margin-left: -41px;
                background-image: url(../img/dlibrary/player.png);
                background-repeat: no-repeat;
                background-position: -96px -55px;
                cursor: pointer;
                z-index: 5;
                content: " ";
                opacity: 0;
                transition: all .6s;
            }
            .img-loding:hover:after{
                opacity: 1;
                transition: all .6s;
            }
        }
        info-title{
            color: #000;
        }
        li:nth-of-type(4n){
            margin-right: 0;
        }
    }
}

//视频播放窗口
.video-wrapper{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-width: 1000px;
    height: 100%;
    background-color: rgba(0,0,0,.5);
    z-index: 1000;
    .play-frame{
        position: absolute;
        top: 50%;
        left: 50%;
        width: 1000px;
        height: 700px;
        margin-top: -350px;
        margin-left: -500px;
        background-color: #fff;
        .video-cover{
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: #fff;
            z-index: 11;
            &:before{
                position: absolute;
                width: 100%;
                height: 100%;
                display: inline-block;
                background-color: rgba(0,0,0,.2);
                z-index: 12;
                content: " ";
            }
            img{
                width: 100%;
                height: 100%;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
                -o-transform: translate(-50%,-50%);
                -moz-transform: translate(-50%,-50%);
                -webkit-transform: translate(-50%,-50%);
            }
        }
    }
    .btn-play,.btnclosge{
        position: absolute;
        cursor: pointer;
    }
    .btn-play{
        width: 164px;
        height: 164px;
        top: 50%;
        left: 50%;
        margin-top: -82px;
        margin-left: -82px;
        background-image: url(../img/dlibrary/player.png);
        background-repeat: no-repeat;
        background-position: -196px -110px;
        background-size: 2000px 2000px;
        z-index: 12;
    }
    .btnclosge{
        position: absolute;
        right: 20px;
        top: 20px;
        width: 36px;
        height: 36px;
        color: #fff;
        font-size: 36px;
        -ms-user-select: none;
        user-select: none;
        -moz-user-select: none;
        -webkit-user-select: none;
    }
}